<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东购物车</title>
    <style>
        input {
            width: 40px;
            text-align: center;
        }
        body{
            margin: auto;
            text-align: center;
        }
        table {
            border-collapse: collapse;
            margin: auto;
        }
        td {
            border: 1px solid #000;
        }
        .del:hover{
            cursor: pointer;
        }
        h1 img:nth-of-type(2){
            vertical-align: bottom;
        }
        tr th:nth-of-type(2){
            text-align: left;
        }
        tr th:nth-of-type(3){
            width: 90px;
            text-align: left;
            padding-left: 20px;
        }
        tr th:nth-of-type(4){
            width: 90px;
            text-align: left;
            padding-left: 10px;
        }
        tr th:nth-of-type(5){
            width: 100px;
            text-align: left;
            padding-left: 25px;
        }
        tr th:nth-of-type(6){
            width: 120px;
            text-align: left;
            color: #60606c;
        }
        .tr td img{
            vertical-align: top;
        }
        .tr td .zzz{
            width: 235px;
            display: inline-block;
            font-size: 14px;
            color: #313733;
            line-height: 18px;
        }
        .tr td .ccc{
            display: inline-block;
            vertical-align: top;
            font-size: 14px;
            color: #6f5c5e;
            width: 220px;
        }
        .tr .full{
            border: 1px solid #f3eeea;
            padding: 17px 10px 23px 20px;
        }
        thead tr th{
            color: #776a74;
            font-size: 14px;
        }
        thead tr{
            border: 1px solid #e1e1e1;
            line-height: 43px;
            border-bottom: 2px solid #a8a9ab;
            background: #f3f3f3;
        }
        h1,.div{
            text-align: left;
            padding-left: 155px;
        }
        div span{
            color: red;
            border-bottom: 1px solid red;
        }
        .tr td{
            vertical-align: top;
            text-align: left;
            padding-top: 17px;
            border: 0px;
            border-bottom: 1px solid #f5eee4;
        }
        .tr{
            background: #fef4e8;
        }
        .jjj{
            text-align: right;
            margin: 30px 155px 30px 0px;
        }
    </style>
</head>
<body>
<h1><img src="images/jd.png" alt=""><img src="images/gwc.png" alt=""></h1>
<div class="div">
    <span>商品数量 <span>5</span></span>
</div>
<table id="table">
    <thead>
        <tr>
            <th>商品</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr class="tr">
            <td class="full"><img src="images/yi.gif" alt=""></td>
            <td>
                <div class="zzz">
                    <img src="images/jd_03.png" alt=""><img src="images/sx_03.png" alt="">
                    美伦达 赣南脐橙 2017新上市 3斤装 铂金果</div>
                <div class="ccc">颜色:赣南脐橙铂金果 3斤装</div>
            </td>
            <td>￥ <span>25.80</span></td>
            <td>
                <input class="num" type="text" value="1">
            </td>
            <td>￥ <span></span></td>
            <td class="del">删除</td>
        </tr>
        <tr class="tr">
            <td class="full"><img src="images/er_03.png" alt=""></td>
            <td>
                <div class="zzz"><img src="images/sx_03.png" alt="">Camposol|秘鲁进口精选蓝莓 4盒装 单盒约125g 新鲜水果 </div>
                <div class="ccc">颜色:秘鲁蓝莓 4盒装</div>
            </td>
            <td>￥ <span>46.90</span></td>
            <td>
                <input class="num" type="text" value="1">
            </td>
            <td>￥ <span></span></td>
            <td class="del">删除</td>
        </tr>
        <tr class="tr">
            <td class="full"><img src="images/san_06.png" alt=""></td>
            <td>
                <div class="zzz"><img src="images/sx_03.png" alt="">欢乐果园 广西青皮芒果 2个装 单约260g以上 新鲜水果</div>
                <div class="ccc">青皮芒 2粒 尝鲜装</div>
            <td>￥ <span>10.90</span></td>
            <td>
                <input class="num" type="text" value="1">
            </td>
            <td>￥ <span></span></td>
            <td class="del">删除</td>
        </tr>
        <tr class="tr">
            <td class="full"><img src="images/si_08.gif" alt=""></td>
            <td>
                <div class="zzz"><img src="images/sx_03.png" alt="">爱奇果 新疆库尔勒香梨 约2.5kg 当季新果 特级装 单果约120-</div>
                <div class="ccc">颜色:2.5kg单果约120-150g</div>
            <td>￥ <span>39.90</span></td>
            <td>
                <input class="num" type="text" value="1">
            </td>
            <td>￥ <span></span></td>
            <td class="del">删除</td>
        </tr>
        <tr class="tr">
            <td class="full"><img src="images/wu_10.gif" alt=""></td>
            <td>
                <div class="zzz"><img src="images/sx_03.png" alt="">宏辉果蔬 苹果 烟台 红富士 12个 单约75mm 总重约2.1kg 新鲜</div>
                <div class="ccc">颜色:12粒 75mm红富士</div>
            <td>￥ <span>34.90</span></td>
            <td>
                <input class="num" type="text" value="1">
            </td>
            <td>￥ <span></span></td>
            <td class="del">删除</td>
        </tr>
    </tbody>
</table>
<div class="jjj">总价: ￥ <span id="allCount"></span>元</div>
<!--<div class="container">-->
<!--<header>-->
<!--<img src="images/jd.png" alt="">-->
<!--<img class="gwc" src="images/gwc.png" alt="">-->
<!--</header>-->
<!--<div class="nav">-->
<!--<ul>-->
<!--<li>-->
<!--<a href="">-->
<!--<em>全部商品</em>-->
<!--<span>1</span>-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--<div class="rem">-->
<!--<div class="one">全选</div>-->
<!--<div class="two">商品</div>-->
<!--<div class="three">单价</div>-->
<!--<div class="four">数量</div>-->
<!--<div class="five">小计</div>-->
<!--<div class="six">操作</div>-->
<!--</div>-->
<!--<ul id="ul" class="sp">-->
<!--<li>-->
<!--<img src="images/yi.gif" alt="">-->
<!--<a href="">美伦达 山西橙子2019新上市 3斤装 铂金果</a>-->
<!--<span>颜色:山西橙子铂金果 3斤装</span>-->
<!--<a href="">￥<span>25.80</span></a>-->
<!--<input type="text" value="1">-->
<!--<div class="qq">-->
<!--<p>￥<span>25.80</span></p>-->
<!--<span>1.68kg</span>-->
<!--</div>-->
<!--<button>删除</button>-->
<!--</li>-->
<!--<li>-->
<!--<img src="images/er_03.png" alt="">-->
<!--<a href="">美伦达 山西橙子2019新上市 3斤装 铂金果</a>-->
<!--<span>颜色:山西橙子铂金果 3斤装</span>-->
<!--<a href="">￥ <span>46.90</span></a>-->
<!--<input type="text" value="1">-->
<!--<div class="qq">-->
<!--<p>￥<span>49.60</span></p>-->
<!--<span>1.25kg</span>-->
<!--</div>-->
<!--<button>删除</button>-->
<!--</li>-->
<!--<li>-->
<!--<img src="images/san_06.png" alt="">-->
<!--<a href="">美伦达 山西橙子2019新上市 3斤装 铂金果</a>-->
<!--<span>颜色:山西橙子铂金果 3斤装</span>-->
<!--<a href="">￥<span>10.90</span></a>-->
<!--<input type="text" value="1">-->
<!--<div class="qq">-->
<!--<p>￥<span>10.90</span></p>-->
<!--<span>0.75kg</span>-->
<!--</div>-->
<!--<button>删除</button>-->
<!--</li>-->
<!--<li>-->
<!--<img src="images/si_08.gif" alt="">-->
<!--<a href="">美伦达 山西橙子2019新上市 3斤装 铂金果</a>-->
<!--<span>颜色:山西橙子铂金果 3斤装</span>-->
<!--<a href="">￥<span>39.90</span></a>-->
<!--<input type="text" value="1">-->
<!--<div class="qq">-->
<!--<p>￥<span>39.90</span></p>-->
<!--<span>2.6kg</span>-->
<!--</div>-->
<!--<button>删除</button>-->
<!--</li>-->
<!--<li>-->
<!--<img src="images/yi.gif" alt="">-->
<!--<a href="">美伦达 山西橙子2019新上市 3斤装 铂金果</a>-->
<!--<span>颜色:山西橙子铂金果 3斤装</span>-->
<!--<a href="">￥<span>34.90</span></a>-->
<!--<input type="text" value="1">-->
<!--<div class="qq">-->
<!--<p>￥ <span>34.90</span></p>-->
<!--<span>2.1kg</span>-->
<!--</div>-->
<!--<button>删除</button>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<script src="js/script.js"></script>
</body>
</html>